<template>
  <!-- 手机端 和 PC端 电脑端 首页设置 -->
  <div class="app-container " v-loading="loading">
    <el-form v-hasPermi="['searchTenantID']" class="search-form-new" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="店铺" prop="tenantId">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable @change="tenantChange">
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="getAllConfig">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="flex">
      <div class="left-box">
        <div class="phone_set_box">
          <img class="phone_box" src="https://imgage.maimaihao.com/yuduhulian/h5/phoneborder.png" alt="">
          <div v-if="!showInitBtn" class="addModelBtn">
            <el-button type="primary" @click="addModelOpen">添加模块</el-button>
          </div>
          <div v-if="pageConfig&&pageConfig.xuanfuShow" class="kefuxuanfu">
            <div class="img">
              <img :src="pageConfig.xuanfuImg" alt="">
            </div>
            <div :style="`color:${pageConfig.xuanfuColor}; background-color:${pageConfig.xuanfuBgColor}`" class="txt">联系客服</div>
          </div>
          <div v-if="pageConfig&&modelConfigArr&&modelConfigArr.length" class="phone_set_box_content">
            <div class="phone_set_box_content_inner" :style="`background-color:${pageConfig.pageBgcolor||''};background-image:url('${pageConfig.pageTopBgImage}')`">
              <draggable itemKey="modelKey" v-model="modelConfigArr" animation="300" @end="onEnd">
                <template v-for="model in modelConfigArr">
                  <div v-if="model.isShow&&model.modelKey!='goodsListBox'" :key="model.modelKey">
                    <component @clickItem="clickItem" :is="model.modelKey" :model="model" :gameList="gameList"></component>
                  </div>
                </template>
              </draggable>
              <div v-if="modelConfigArr[modelConfigArr.length-1].modelKey=='goodsListBox'">
                <component @clickItem="clickItem" :is="'goodsListBox'" :model="modelConfigArr[modelConfigArr.length-1]" :gameList="gameList"></component>
              </div>
            </div>

          </div>
          <div v-else style="padding-top: 400px;text-align: center;">
            <el-button icon="el-icon-setting" style="width: 150px;height: 60px;font-size: 20px;margin-bottom: 20px;" plain type="primary" @click="initSetting">一键设置</el-button>
            <div style="color: #999;" v-if="showInitBtn">请先点击一键设置，再自行修改。</div>
          </div>
        </div>
      </div>
      <div class="rg-box" v-if="!showInitBtn">
        <div class="peizhi_box" v-if="formData&&formData.modelKey">
          <div class="tit">
            <span v-if="formData.modelKey=='topBar'">LOGO区设置</span>
            <span v-if="formData.modelKey=='searchBox'">搜索栏设置</span>
            <span v-if="formData.modelKey=='menuBox'">菜单设置</span>
            <span v-if="formData.modelKey=='jiaoyiGonggao'">成交快报设置</span>
            <span v-if="formData.modelKey=='gameIconBox'">游戏区设置</span>
            <span v-if="formData.modelKey=='imgBtnBox'">卡片区设置</span>
            <span v-if="formData.modelKey=='lunbo'">轮播设置</span>
            <span v-if="formData.modelKey=='zhubo'">主播设置</span>
            <span v-if="formData.modelKey=='goodsListBox'">商品列表设置</span>
            <i @click="closeModelSetbox" class="el-icon-error"></i>
          </div>
          <div class="set_inner">
            <div class="tip" v-if="formData.modelKey=='gameIconBox'">
              自定义游戏列表请在 <span>“设置管理>游戏管理”</span> 菜单进行设置。
            </div>
            <div v-if="formData.modelKey=='menuBox'||formData.modelKey=='lunbo'||formData.modelKey=='zhubo'||formData.modelKey=='imgBtnBox'" class=" set_box">
              <phoneImgListSetting ref="phoneImgListSetting" :configArea="formData"></phoneImgListSetting>
            </div>
            <div class="topbar_set_box set_box">
              <el-form ref="form" :model="formData" label-width="100px">
                <el-form-item label="是否显示">
                  <el-switch v-model="formData.isShow"></el-switch>
                </el-form-item>
                <!-- <el-form-item label="标题颜色" v-if="formData.modelKey=='goodsListBox'">
                <el-color-picker v-model="formData.titColor"></el-color-picker>
              </el-form-item> -->
                <el-form-item label="字体颜色" v-if="formData.modelKey!='lunbo'&&formData.modelKey!='imgBtnBox'">
                  <el-color-picker v-model="formData.txtColor" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item label="背景色" v-if="formData.modelKey!='lunbo'&&formData.modelKey!='topBar'&&formData.modelKey!='searchBox'">
                  <el-color-picker v-model="formData.bgColor" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item label="背景图" v-if="formData.modelKey!='lunbo'&&formData.modelKey!='topBar'&&formData.modelKey!='searchBox'" :class="{'hiddenupload':imgShowList.length}">
                  <el-upload :action="uploadImgUrl" :file-list="imgShowList" :show-file-list="true" list-type="picture-card" :limit="1" :on-success="handleUploadSuccess" :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :headers="headers">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>

                <div v-if="formData.modelKey=='topBar'" class="topbar_set_box set_box">
                  <el-form-item label="显示LOGO">
                    <el-switch v-model="formData.logoShow"></el-switch>
                  </el-form-item>
                  <el-form-item label="显示名称">
                    <el-switch v-model="formData.nameShow"></el-switch>
                  </el-form-item>
                  <el-form-item label="显示客服图标">
                    <el-switch v-model="formData.kefuShow"></el-switch>
                  </el-form-item>
                  <el-form-item label="LOGO" :class="{'hiddenupload':imgShowList2.length}">
                    <el-upload :action="uploadImgUrl" :file-list="imgShowList2" :show-file-list="true" list-type="picture-card" :limit="1" :on-success="handleUploadSuccess2" :on-remove="handleRemove2" :on-preview="handlePictureCardPreview" :headers="headers">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="网站名称">
                    <el-input v-model="formData.name" maxlength="12" placeholder="最多12个字" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="宣传语">
                    <el-input v-model="formData.des" maxlength="16" placeholder="显示在网站名称下方，最多16个字" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="宣传语颜色">
                    <el-color-picker v-model="formData.desColor" show-alpha></el-color-picker>
                  </el-form-item>
                  <el-form-item label="客服图标" :class="{'hiddenupload':imgShowList3.length}">
                    <el-upload :action="uploadImgUrl" :file-list="imgShowList3" :show-file-list="true" list-type="picture-card" :limit="1" :on-success="handleUploadSuccess3" :on-remove="handleRemove3" :on-preview="handlePictureCardPreview" :headers="headers">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                </div>
                <div v-if="formData.modelKey=='searchBox'" class="searchbox_set_box set_box">
                  <el-form-item label="颜色">
                    <el-color-picker v-model="formData.color" show-alpha></el-color-picker>
                  </el-form-item>
                  <el-form-item label="按钮背景">
                    <div style="width: 150px;">
                      <GradientColorPicker v-model="formData.btnBgcolor" >
                      </GradientColorPicker>
                    </div>
                  </el-form-item>
                </div>
                <!-- <div v-if="formData.modelKey=='zhubo'" class=" set_box">
                  <el-form-item label="‘全部’颜色">
                    <el-color-picker v-model="formData.allColor" show-alpha></el-color-picker>
                  </el-form-item>
                </div> -->
                <div v-if="formData.modelKey=='imgBtnBox'" class=" set_box">
                  <el-form-item label="标题">
                    <el-input v-model="formData.title" maxlength="20" placeholder="卡片区标题，最多20个字" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="介绍">
                    <el-input v-model="formData.des" maxlength="30" placeholder="显示在标题下方，最多30个字" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="标题色">
                    <el-color-picker v-model="formData.titColor" show-alpha></el-color-picker>
                  </el-form-item>
                  <el-form-item label="介绍色">
                    <el-color-picker v-model="formData.desColoe" show-alpha></el-color-picker>
                  </el-form-item>

                </div>
                <div v-if="formData.modelKey=='chengjiao'" class=" set_box">

                  <el-form-item label="数字颜色">
                    <el-color-picker v-model="formData.numColor" show-alpha></el-color-picker>
                  </el-form-item>
                  <el-form-item label="昨日成交数">
                    <el-input v-model="formData.zuori" placeholder="昨日成交数,不填即显示真实数据"></el-input>
                  </el-form-item>
                  <el-form-item label="总成交数">
                    <el-input v-model="formData.zongji" placeholder="总成交数,不填即显示真实数据"></el-input>
                  </el-form-item>

                </div>
                <div v-if="formData.modelKey=='goodsListBox'" class=" set_box">
                  <el-form-item label="标题图片" :class="{'hiddenupload':imgShowList5.length}">
                    <el-upload :action="uploadImgUrl" :file-list="imgShowList5" :show-file-list="true" list-type="picture-card" :limit="1" :on-success="handleUploadSuccess5" :on-remove="handleRemove5" :on-preview="handlePictureCardPreview" :headers="headers">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="高亮背景色">
                    <el-color-picker v-model="formData.activeBgcolor" show-alpha></el-color-picker>
                  </el-form-item>
                  <el-form-item label="高亮字体色">
                    <el-color-picker v-model="formData.activeColor" show-alpha></el-color-picker>
                  </el-form-item>
                  <el-form-item label="‘全部’颜色">
                    <el-color-picker v-model="formData.allColor" show-alpha></el-color-picker>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
        <div class="peizhi_box" v-else>
          <div class="tit">
            <span>页面设置</span>
          </div>
          <div class="set_inner">
            <div class=" set_box" v-if="pageConfig">
              <el-form ref="form2" :model="pageConfig" label-width="90px">
                <el-form-item label="页面背景色">
                  <el-color-picker v-model="pageConfig.pageBgcolor" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item label="头部背景图" :class="{'hiddenupload':imgShowList4.length}">
                  <el-upload :action="uploadImgUrl" :file-list="imgShowList4" :show-file-list="true" list-type="picture-card" :limit="1" :on-success="handleUploadSuccess4" :on-remove="handleRemove4" :on-preview="handlePictureCardPreview" :headers="headers">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
                <!-- 悬浮按钮  xuanfuImg:'', xuanfuShow:true, xuanfuBgColor:'',-->
                <el-form-item label="悬浮按钮">
                  <el-switch v-model="pageConfig.xuanfuShow"></el-switch>
                </el-form-item>
                <el-form-item label="悬浮按钮色">
                  <el-color-picker v-model="pageConfig.xuanfuBgColor" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item label="字体颜色">
                  <el-color-picker v-model="pageConfig.xuanfuColor" show-alpha></el-color-picker>
                </el-form-item>
                <el-form-item label="悬浮按钮图" :class="{'hiddenupload':imgShowList6.length}">
                  <el-upload :action="uploadImgUrl" :file-list="imgShowList6" :show-file-list="true" list-type="picture-card" :limit="1" :on-success="handleUploadSuccess6" :on-remove="handleRemove6" :on-preview="handlePictureCardPreview" :headers="headers">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

        <div class="center" style="margin-top: 15px;">

          <el-button v-if="!showInitBtn" type="primary" @click="saveSetting">保存设置</el-button>

        </div>
      </div>
      <div style="margin-left: 10px;" v-if="!showInitBtn">
        <el-button type="plain" @click="initSetting">恢复默认设置</el-button>

      </div>

    </div>

    <!-- 一下是弹出框 -->
    <el-dialog title="添加模块" :visible.sync="addModelShow" :close-on-click-modal="false" width="550px">
      <div class="form-box">
        <el-form ref="form3" :model="addModelObj" label-width="80px" class="demo-ruleForm">
          <el-form-item label="选择模块" prop="name">
            <el-select v-model="addModelObj.modelKey" placeholder="请选择模块" clearable>
              <el-option v-for="dict in hiddenModelList" :key="dict.modelKey" :label="dict.modelName" :value="dict.modelKey" />
            </el-select>
          </el-form-item>
          <div class="center" style="margin-top: 30px;">
            <el-button @click="addModelObj.modelKey='';addModelShow=false">取消</el-button>
            <el-button type="primary" @click="addSure" v-loading="loading">确认</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import shopPageSettingApi from "@/api/tenantApis/shopPageSetting";
import gameListApi from "../../../../../api/gameConfig/gameList";

import { getToken } from "@/utils/auth";

//导入draggable组件
import draggable from "vuedraggable";

// 导入颜色选择器组件
// import GradientColorPicker from "vue-gradient-color-picker";
import GradientColorPicker from "../../../../../components/common/gradient-color-picker.vue";
// 自动导入 h5Home 文件夹中的所有组件
import topBar from "./pageComponents/h5Home/topBar.vue";
import searchBox from "./pageComponents/h5Home/searchBox.vue";
import menuBox from "./pageComponents/h5Home/menuBox.vue";
import lunbo from "./pageComponents/h5Home/lunbo.vue";
import zhubo from "./pageComponents/h5Home/zhubo.vue";
import imgBtnBox from "./pageComponents/h5Home/imgBtnBox.vue";
import gameIconBox from "./pageComponents/h5Home/gameIconBox.vue";
import goodsListBox from "./pageComponents/h5Home/goodsListBox.vue";
import jiaoyiGonggao from "./pageComponents/h5Home/jiaoyiGonggao.vue";
import chengjiao from "./pageComponents/h5Home/chengjiao.vue";

// 设置图片列表的组件
import phoneImgListSetting from "./setComponents/phoneImgListSetting.vue";

// 引入初始数据
import defaultJSON from "../../../../../utils/defaultJSON";
export default {
  name: "ShopPhoneSetting",
  beforeRouteLeave(to, from, next) {
    const newJSON = JSON.stringify({
      pageConfig: this.pageConfig,
      modelConfig: this.modelConfig,
    });
    newJSON;
    // console.log("%c Line:249 🥛 newJSON", "color:#465975", newJSON);
    if (this.oldSettingJSON == newJSON) {
      next(); // 继续路由跳转
    } else {
      this.$confirm("离开当前页面会丢失未保存的设置，确认离开吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          next(); // 继续路由跳转
        })
        .catch(() => {
          next(false); // 取消路由跳转
        });
    }
  },
  components: {
    GradientColorPicker,
    draggable,
    topBar,
    searchBox,
    menuBox,
    lunbo,
    zhubo,
    imgBtnBox,
    gameIconBox,
    goodsListBox,
    jiaoyiGonggao,
    chengjiao,
    phoneImgListSetting,
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    tenantList() {
      let arr = JSON.parse(JSON.stringify(this.$store.getters.tenantList));
      return arr;
    },
    hiddenModelList() {
      let arr = [];
      if (this.modelConfigArr && this.modelConfigArr.length) {
        arr = this.modelConfigArr.filter((r) => !r.isShow);
      }
      return arr;
    },
  },
  data() {
    return {
      addModelShow: false,
      addModelObj: {
        modelKey: "",
      },
      loading: false,
      // 预定义一些常用渐变色
      predefineColors: [
        "linear-gradient(90deg, #ffd28d 0%, #ffa132 100%)",
        "linear-gradient(90deg, #83a4d4 0%, #b6fbff 100%)",
      ],

      config: [],
      formData: {},
      queryParams: {
        type: 1,
        tenantId: "",
      },
      gameList: [],
      showMoreGame: false,
      themeConfig: {
        themeColor: "",
      },
      modelConfigArr: [],
      pageConfig: null,
      modelConfig: null,
      configForm: {},
      uploadImgUrl: "",
      imgShowList: [], //背景图
      imgShowList2: [], //LOGO 图
      imgShowList3: [], //客服图标 图
      imgShowList4: [], //页面头部背景 图
      imgShowList5: [], //商品标题 图
      imgShowList6: [], //悬浮按钮 图
      showInitBtn: false, //初始化按钮，查不到配置数据时显示
      oldSettingJSON: `{"pageConfig":null,"modelConfig":null}`, // 旧版数据JSON字符串
    };
  },
  created() {
    this.headers = {
      Authorization: "Bearer " + getToken(),
    };
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
    this.imgShowList4 = [];
    this.imgShowList6 = [];
    if (!this.checkPermi(["searchTenantID"])) {
      this.queryParams.tenantId = this.shopInfo.tenantId;
      this.queryParams.tenantName = this.shopInfo.tenantName;
      this.queryParams.logo = this.shopInfo.avatar;
      this.queryParams.type = "1";
      this.getAllConfig();
      this.getGameList();
    }
  },
  methods: {
    // 获取所有配置
    getAllConfig() {
      this.loading = true;
      this.oldSettingJSON = `{"pageConfig":null,"modelConfig":null}`;
      shopPageSettingApi
        .decorationTypeListNew(this.queryParams)
        .then((res) => {
          this.loading = false;
          if (res.data) {
            this.configForm.id = res.data.id;
            if (res.data.shouye) {
              this.oldSettingJSON = res.data.shouye;
              const homeJSON = JSON.parse(res.data.shouye);
              this.setInitData(homeJSON);
            } else {
              this.showInitBtn = true;
              this.getDefaultSetting();
            }
          } else {
            this.showInitBtn = true;
            this.getDefaultSetting();
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 获取默认设置json
    getDefaultSetting() {
      this.getDicts('h5page')
        .then((res) => {
          //
          try {
            const obj = this.arrayToObject(res.data, "dictLabel");
            const homeJSON = JSON.parse(obj.shouye.remark);
            homeJSON.modelConfig.topBar.name = this.queryParams.tenantName;
            homeJSON.modelConfig.topBar.logoImg = this.queryParams.logo;
            homeJSON.pageConfig.xuanfuImg = this.queryParams.logo;
            this.oldSettingJSON =JSON.stringify(homeJSON);
            this.setInitData(homeJSON);
          } catch (error) {}
        });
    },
    // 默认设置
    initSetting() {
      const homeJSON = defaultJSON.h5SettingObj.shouye;
      homeJSON.modelConfig.topBar.name = this.queryParams.tenantName;
      homeJSON.modelConfig.topBar.logoImg = this.queryParams.logo;
      homeJSON.pageConfig.xuanfuImg = this.queryParams.logo;
      if (this.showInitBtn) {
        // 没设置过
        this.setInitData(homeJSON);
      } else {
        // 设置过
        this.$confirm(
          "当前操作会覆盖你的自定义设置，是否恢复到默认设置？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.setInitData(homeJSON);
          })
          .catch(() => {});
      }
    },
    // 回显数据
    setInitData(homeJSON) {
      this.closeModelSetbox();
      this.pageConfig = { ...this.queryParams, ...homeJSON.pageConfig };
      this.modelConfig = JSON.parse(JSON.stringify(homeJSON.modelConfig));
      if (this.pageConfig.pageTopBgImage) {
        this.imgShowList4 = [{ url: this.pageConfig.pageTopBgImage, name: "" }];
      }
      if (this.pageConfig.xuanfuImg) {
        this.imgShowList6 = [{ url: this.pageConfig.xuanfuImg, name: "" }];
      }
      // 转成数组
      this.convertConfigToArray();
      this.showInitBtn = false;
    },
    // 保存配置
    async saveSetting() {
      if (!this.pageConfig || !this.modelConfig) {
        return this.$message.error("请先进行设置");
      }
      // 判断是新增还是编辑
      let res;
      this.configForm.tenantId = this.queryParams.tenantId;
      this.configForm.tenantName = this.queryParams.tenantName;
      this.configForm.type = this.queryParams.type;
      this.configForm.shouye = JSON.stringify({
        pageConfig: this.pageConfig,
        modelConfig: this.modelConfig,
      });

      if (this.configForm.id) {
        // 编辑
        res = await shopPageSettingApi.decorationTypeEditNew(this.configForm);
      } else {
        // 新增
        res = await shopPageSettingApi.decorationInfoAddNew(this.configForm);
      }

      if (res.code == 200) {
        this.oldSettingJSON = this.configForm.shouye;
        this.$message.success(res.msg);
        this.getAllConfig()
      }
    },

    // 将配置转换成数组的形式
    convertConfigToArray() {
      const arr = [];
      for (const key in this.modelConfig) {
        if (key !== "pageConfig") {
          arr.push(this.modelConfig[key]);
        }
      }
      // 按照 sort 进行排序
      arr.sort((a, b) => a.sort - b.sort);
      this.modelConfigArr = arr;
      return arr;
    },

    // 选择租户
    tenantChange(e) {
      this.tenantList.forEach((r) => {
        if (r.tenantId == e) {
          this.queryParams.tenantName = r.tenantName;
          this.queryParams.logo = r.avatar;
        }
      });
    },

    //拖动结束的方法
    onEnd(e) {
      // console.log("%c Line:204 🍿 e", "color:#4fff4B", e);
      // 重新赋值 sort
      this.modelConfigArr.forEach((r, i) => {
        r.sort = i;
      });
    },
    // 打开模块设置
    clickItem(clickParams) {
      if (clickParams.type == "set") {
        this.imgShowList = [];
        this.imgShowList2 = [];
        this.imgShowList3 = [];
        this.imgShowList5 = [];
        this.formData = this.modelConfig[clickParams.modelKey];
        if (this.formData.bgImage) {
          this.imgShowList = [{ url: this.formData.bgImage, name: "" }];
        }
        if (clickParams.modelKey == "topBar") {
          if (this.formData.logoImg) {
            this.imgShowList2 = [{ url: this.formData.logoImg, name: "" }];
          }
          if (this.formData.kefuImg) {
            this.imgShowList3 = [{ url: this.formData.kefuImg, name: "" }];
          }
        }
      }
    },
    // 关闭模块设置
    closeModelSetbox() {
      this.imgShowList = [];
      this.imgShowList2 = [];
      this.imgShowList3 = [];
      this.imgShowList5 = [];
      this.formData = {};
    },

    // 打开添加模块的弹窗
    addModelOpen() {
      this.addModelShow = true;
      this.addModelObj.modelKey = "";
    },
    // 添加模块
    addSure() {
      if (!this.addModelObj.modelKey) {
        return this.$message.error("请选择模块！");
      }
      // 将添加的模块放到最后
      let oldIndex;
      this.modelConfigArr.forEach((r, i) => {
        if (r.modelKey == this.addModelObj.modelKey) {
          oldIndex = i;
          r.isShow = true;
        }
      });
      if (oldIndex || oldIndex === 0) {
        // 从数组中移除指定项
        const [item] = this.modelConfigArr.splice(oldIndex, 1);
        // 将移除的项添加到数组末尾
        this.modelConfigArr.splice(this.modelConfigArr.length - 2, 0, item);

        // this.modelConfigArr.push(item);
        // 重新赋值 sort
        this.modelConfigArr.forEach((r, i) => {
          r.sort = i;
        });
        this.modelConfig[this.addModelObj.modelKey] = item;
      }

      this.addModelObj.modelKey = "";
      this.addModelShow = false;
    },

    // 获取游戏列表
    getGameList() {
      let obj = {
        type: "",
      };
      this.showMoreGame = false;
      gameListApi
        .getWebGamelist(obj, {
          "s-tenant-id": this.queryParams.tenantId
            ? this.queryParams.tenantId
            : "",
        })
        .then((res) => {
          this.gameList = res.data;
          this.allGameList = JSON.parse(JSON.stringify(res.data));
          if (res.data.length >= 9) {
            this.gameList = res.data.splice(0, 9);
            this.showMoreGame = true;
          }
        });
    },
    // 背景图上传成功
    handleUploadSuccess(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.imgShowList = [{ url: res.data.filePath, name: "" }];
        this.formData.bgImage = res.data.filePath;
      }
    },
    // 背景图片删除
    handleRemove(response, fileList, file) {
      this.imgShowList = [];
      this.formData.bgImage = "";
    },
    // LOGO
    handleUploadSuccess2(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.imgShowList2 = [{ url: res.data.filePath, name: "" }];
        this.formData.logoImg = res.data.filePath;
      }
    },
    // LOGO图片删除
    handleRemove2(response, fileList, file) {
      this.imgShowList2 = [];
      this.formData.logoImg = "";
    },
    // 右上角客服图标
    handleUploadSuccess3(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.imgShowList3 = [{ url: res.data.filePath, name: "" }];
        this.formData.kefuImg = res.data.filePath;
      }
    },
    // 右上角客服图标
    handleRemove3(response, fileList, file) {
      this.imgShowList3 = [];
      this.formData.kefuImg = "";
    },

    // 页面头部背景图
    handleUploadSuccess4(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.imgShowList4 = [{ url: res.data.filePath, name: "" }];
        this.pageConfig.pageTopBgImage = res.data.filePath;
      }
    },
    // 页面头部背景图
    handleRemove4(response, fileList, file) {
      this.imgShowList4 = [];
      this.pageConfig.pageTopBgImage = "";
    },

    // 商品组件标题图
    handleUploadSuccess5(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.imgShowList5 = [{ url: res.data.filePath, name: "" }];
        this.formData.titleBgImage = res.data.filePath;
      }
    },
    // 商品组件标题图
    handleRemove5(response, fileList, file) {
      this.imgShowList5 = [];
      this.formData.titleBgImage = "";
    },
    // 悬浮按钮   图
    handleUploadSuccess6(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.imgShowList6 = [{ url: res.data.filePath, name: "" }];
        this.pageConfig.xuanfuImg = res.data.filePath;
      }
    },
    // 悬浮按钮  图
    handleRemove6(response, fileList, file) {
      this.imgShowList6 = [];
      this.pageConfig.xuanfuImg = "";
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.$viewerApi({
        images: [file.url],
      });
    },
    uploadNumber(file, fileList) {
      //限制图片数量
      this.$modal.msgError("最多只能上传1张图片");
    },
  },
};
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
::v-deep .model_box {
  margin: 0 auto;
  margin-top: 8px;
  padding: 0 15px;
  position: relative;
  > div {
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  // .btn_zhezhao {
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  //   top: 0;
  //   right: 0;
  //   background-color: rgba(0, 0, 0, 0.3);
  //   color: #fff;
  //   text-align: right;
  //   padding: 10px 15px;
  //   display: none;
  //   z-index: 9;
  //   cursor: move;
  //   i {
  //     font-size: 20px;
  //     cursor: pointer;
  //   }
  // }
  &:hover {
    .btn_zhezhao {
      display: block;
    }
  }
}
.left-box {
  width: 380px;
  height: 670px;
}
.phone_set_box {
  width: 420px;
  height: 850px;
  // border: 1px solid #f3f3f3;
  border-radius: 75px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  flex-shrink: 0;
  transform: scale(0.9);
  transform-origin: left top;
  position: relative;
  .kefuxuanfu {
    position: absolute;
    z-index: 1;
    right: 23px;
    bottom: 200px;
    width: 80px;
    height: 80px;
    text-align: center;
    .img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 2px 2px 5px #333;
      overflow: hidden;
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .txt {
      background-color: #fff;
      padding: 2px 0;
      position: absolute;
      bottom: 10px;
      z-index: 2;
      width: 78px;
      box-shadow: 2px 2px 5px #333;
    }
  }
  .phone_box {
    width: 420px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
  }
  .addModelBtn {
    width: 390px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    padding-top: 7px;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 15px;
    z-index: 10;
  }
  .phone_set_box_content {
    width: 430px;
    height: calc(100% - 86px);
    overflow-y: auto;
    margin-top: 66px;
    margin-bottom: 20px;
    // background-color: #f3f3f3;

    padding-left: 23px;
    // padding-top: 60px;
    padding-bottom: 20px;

    .phone_set_box_content_inner {
      width: 375px;
      padding-bottom: 15px;
      background-repeat: no-repeat;
      background-size: 100% auto;
    }
  }
}
.peizhi_box {
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-left: 15px;
  width: 850px;
  overflow: hidden;

  .tit {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #f7f7f7;
    padding-left: 15px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    border-radius: 8px 8px 0 0;

    .el-icon-error {
      position: absolute;
      right: 15px;
      top: 10px;
      font-size: 20px;
      color: #666;
      cursor: pointer;
    }
  }
  .set_inner {
    padding: 15px;
    max-height: 650px;
    min-height: 400px;
    overflow-y: auto;
  }
  .tip {
    color: #999;
    margin-bottom: 5px;
    span {
      color: #000;
    }
  }
}
</style>
<style lang="scss" >
.color-inputs {
  .color-input {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
  }
  input {
    position: absolute;
  }
}
.gradient-color-picker-input-div {
  height: 13px;
  position: relative;
  border: 1px solid black;
  margin-bottom: 25px;

  > span {
    position: absolute;
    left: var(--percent);
    bottom: -23px;
    width: 12px;
    height: 15px;
    margin-left: -6px;

    user-select: none;

    border: 1px solid gray;
    background-color: #e3e3e3;

    &::before,
    &::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    &::after {
      background-color: #e3e3e3;
      border: solid gray;
      border-width: 0 1px 1px 0;
      display: inline-block;
      padding: 2px;
      top: -4px;
      left: 2.5px;
      width: 2px;
      height: 2px;
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      z-index: -1;
    }

    &::before {
      top: 2px;
      bottom: 2px;
      left: 2px;
      right: 2px;
      background-color: var(--color);
    }
  }
}
.tip {
  color: red;
}
</style>